<!--
数据
   {
   }

-->

<template>
  <div class="mc-map">
        <el-form size="mini">
            <el-form-item v-if="!mapList || mapList.length<=0">
                 <el-button size="mini" @click="addParam(0)">新增</el-button>
            </el-form-item>
            <el-form-item>
            <el-row>
                  <el-col :span="8">
                      {{keyPlaceholder}}
                  </el-col>
                  <el-col :span="8">
                       {{valuePlaceholder}}
                  </el-col>
                  <el-col :span="8">
                      操作
                  </el-col>
            </el-row>
        </el-form-item>
          <template v-for="(item,idx) in mapList">
              <el-form-item>
                  <el-row>
                        <el-col :span="8">
                            <el-input v-model="item.k" :placeholder="keyPlaceholder">
                                <el-button slot="append" @click="focusKey(item)" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-col>
                        <el-col :span="8">
                             <el-input v-model="item.v" :placeholder="valuePlaceholder">
                                  <el-button slot="append" @click="focusValue(item)" icon="el-icon-search"></el-button>
                             </el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-button-group style="margin-top:-2px">
                                <el-button size="mini" @click="addParam(idx)">+</el-button>
                                <el-button size="mini" @click="deleteParam(idx)">-</el-button>
                             </el-button-group>
                        </el-col>
                  </el-row>
              </el-form-item>
          </template>
        </el-form>
  </div>
</template>

<script>
export default {
    name: 'mc-map',
    data () {
        return {
            empty:false,
            mapList:[]
        }
    },
    props:{
        'data':{type:Object},
        'keyPlaceholder':{type:String},
        'valuePlaceholder':{type:String},
    },
    watch:{
        mapList:
        {
          handler(){
            for(var key in this.data){
                delete this.data[key];
            }
            for(var i=0;i<this.mapList.length;i++){
                var k = this.mapList[i].k;
                var v = this.mapList[i].v;
                if(k!==''&&v!==''){
                  this.data[k] = v;
                }
            }
          },
          deep:true
        }
    },
    mounted () {
        for(var key in this.data){
          this.mapList.push({k:key,v:this.data[key]})
        }
    },
    methods:{
        buildOneParam:function(){
            return {k:"",v:""}
        },
        addParam:function(idx){
            this.mapList.splice(idx+1,0,this.buildOneParam())
        },
        deleteParam:function(idx){
            this.mapList.splice(idx,1)
        },
        focusKey:function(item){
          this.$emit("focus-key",{field:'k',item})
        },
        focusValue:function(item){
          this.$emit("focus-value",{field:'v',item})
        },
        confirm:function(){
            this.$emit("save-data",this.form)
        }
    }
}
</script>

<style lang="scss">
    .mc-api-param {
        .el-form-item{
            margin-top:10px;
        }
        .el-select{
            width:99%;
        }
    }

</style>
